<template>
	<view>
		<custom-nav-sq-xcx :isBack="true" currBg="usuallyBg" :needConBlock="true">
			<block slot="content">课程详情</block>
		</custom-nav-sq-xcx>
		<view class="sqResCover">
			<view class="innerCover posRel">
				<view class="fansNum posAbso">
					<view class="fans">收藏数:10</view>
					<view>点赞数:11</view>
				</view>
			</view>
		</view>
		<view class="sqResCon">
			<view class="resTit">发展心理学</view>
			<view class="resPrice spaceBet">
				<view>共66节</view>
				<!-- <view class="price">¥29.9</view> -->
				<view class="price">免费</view>
			</view>
			<view class="resAutor comMod">
				<view class="authorItem spaceBet">
					<view>上传者</view>
					<view class="authorCon">和心云</view>
				</view>
				<view class="authorItem spaceBet">
					<view>版权方</view>
					<view class="authorCon">上海示范大学</view>
				</view>
			</view>
			<view class="resIntro comMod">
				<view class="modTit">课程介绍</view>
				<view class="introCon">范德萨发了股份登记管理的分级管理发生的几率付款时间发发的斯洛伐克的设计费</view>
			</view>
			<view class="resIntro comMod">
				<view class="modTit">课程目录</view>
				<!-- <res-ml></res-ml> -->
				<course-list
					currSys="sqSys"
					:fromPage="fromPage" 
					:trailTag="trailTag" 
					:freeTag="freeTag" 
					:buyTag="buyTag" 
					:resList="resList"
				></course-list>
				<!-- @playCurr="playCurr" -->
			</view>
			<view class="resIntro comMod">
				<view class="modTit spaceBet">
					<view>课程评论</view>
					<view class="more">更多</view>
				</view>
				<sq-res-pl></sq-res-pl>
			</view>
		</view>
		<course-btn></course-btn>
	</view>
</template>

<script>
	import CourseList from '../components/CourseList'
	import SqResPl from '../components/SqResPl'
	import CourseBtn from '../components/CourseBtn'
	export default {
		components:{
			SqResPl,
			CourseList,
			CourseBtn
		},
		data(){
			return{
				fromPage:'resDetPage',
				trailTag:1,//1可试听/看 2否
				freeTag:2,//1免费 2收费
				buyTag:0,//0未购买 1已购买
				resList:[
					{id:1,dirName:'引子:你知道我在想什么吗?',allTime:'00:04:32',finishFlag:1,type:1},
					{id:2,dirName:'情绪和情感的催化剂?',allTime:'00:04:32',finishFlag:0,type:1},
					{id:2,dirName:'反倒是离开房间反倒是解放路口时间?',allTime:'00:04:32',finishFlag:0,type:1}
				]
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wrap{
		padding-bottom: 120rpx;
	}
	.sqResCover{
		height: 420rpx;
		background: $pss-sq-main-bg;
		padding: 30rpx;
		margin-bottom: -40rpx;
		.innerCover{
			height: 380rpx;
			background: pink;
			border-radius: 16rpx;
			.fansNum{
				padding: 20rpx;
				background: rgba(0,0,0,.5);
				color: #fff;
				font-size: 22rpx; 
				right: 30rpx;
				top: 30rpx;
				border-radius: 10rpx;
				display: flex;
				align-items: center;
				.fans{
					margin-right: 15rpx;
				}
			}
		}
	}
	.sqResCon{
		padding: 30rpx 30rpx 0;
		border-radius:30rpx 30rpx 0 0;
		background: #fff;
		.resTit{
			font-size: 32rpx;
			color:$sq-main0;
			font-weight: 600;
		}
		.resPrice{
			font-size: 26rpx;
			color:$sq-main8;
			margin: 15rpx 0;
			align-items: center;
			.price{
				font-size: 32rpx;
				color: $pss-sq-red;
				font-weight: 600;
			}
		}
		.comMod{
			padding: 20rpx;
			background: $sq-fue;
			border-radius: 16rpx;
			margin-bottom: 30rpx;
		}
		.resAutor{
			color: $sq-main8;
			font-size: 26rpx;
			.authorItem:first-child{
				margin-bottom: 20rpx;
			}
			.authorCon{
				font-size: 28rpx;
				color:$sq-main0;
			}
		}
		.modTit{
			font-size: 30rpx;
			color: $sq-main0;
			font-weight: 600;
			margin-bottom: 10rpx;
			.more{
				font-size: 26rpx;
				padding-left: 30rpx;
				color: $sq-main8;
				font-weight: normal;
			}
		}
		.introCon{
			font-size: 28rpx;
			color:$sq-main0;
		}
		
	}
</style>